<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Georgia;
            outline: none;
        }
        #canvas {
            background: #55134e;
        }
        .box,
        .box2 {
            padding: 15px;
            opacity: 0;
        }
        .box2 {
            display: none;
        }
        .top {
            padding: 15px;
            background: #3d4c53;
            color: #fff;
            text-align: right;
        }
        .panel {
            background: rgba(0, 0, 0, 0);
            position: absolute;
            top: 0;
            left: -75px;
            cursor: default;
        }
        .panel:hover {
            opacity: 1;
            left: 0;
            background: #fff;
        }
        .panel:hover .top {
            text-align: left;
        }
        .panel:hover .box {
            opacity: 1;
        }
        .panel:hover .box2 {
            opacity: 1;
        }
        .unit span {
            position: relative;
            top: -6px;
            disply: inline-block;
            margin: 0 0 0 10px;
            font-size: 9pt;
        }
        .unit {
            margin: 0 0 5px 0;
            padding: 0 0 5px 0;
            border-bottom: 1px dashed #ccc;
        }
        .unit small {
            display: block;
            font-size: 8pt;
            color: #999;
            margin: 5px 0 5px 0;
        }
    </style>
    <script src="../../js/jquery.js"></script>
</head>
<body>
<div class="panel">
    <div class="top"><i>CPanel</i>
    </div>
    <div class="box"></div>
    <div class="box2">
        <button id="export">Export</button>
        <button id="load">Load</button>
    </div>
</div>

<canvas id="canvas"></canvas>
</body>
</html>

<script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    ctx.translate(canvas.width / 2, canvas.height / 2);


    function drawCircles(depth, teta) {
        var circleSize = options['circleSize'].val;
        var angle = teta;
        var pos = new point(-canvas.width / 4, 0);
        var localTime = 0;

        for (var i = 0; i < depth; i++) {
            ctx.fillStyle = "rgba(85, 19, 78,0.4)";
            if (i == depth - 1) {
                ctx.fillStyle = "#fff";
                circleSize = 3;
            }

            if (pos.x + circleSize < 0) {
                ctx.beginPath();
                ctx.arc(pos.x, pos.y, circleSize, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();
            }

            var sizeExp = options['sizeExp'].val / 10;
            circleSize /= sizeExp;

            var inside = -1;
            if (options['circleInside'].val == 0) inside = 1;
            pos.x += (sizeExp * circleSize + circleSize * inside) * Math.cos(angle);
            pos.y += (sizeExp * circleSize + circleSize * inside) * Math.sin(angle);

            var sign = 1;

            if (options['reverseDir'].val == 1) sign = -1;
            if (i % 2 == 0) sign = 1;

            angle += teta * sign * (options['speed'].val / 10);
        }

        ctx.fillStyle = "#FEC343";
        ctx.beginPath();
        var dist = getDist(new point(canvas.width / 4, 0), new point(pos.x + canvas.width / 2, pos.y));
        ctx.arc(pos.x + canvas.width / 2, pos.y, options['trailSize'].val / 10, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
    }

    var param = 0;

    function animate() {
        clear();
        drawCircles(options['iterations'].val, param);

        param += 0.01;
    }

    setInterval(animate, 0);

    function drawLines(curveData, color, size) {
        for (var i = 1; i < curveData.length; i++) {
            drawLine(curveData[i - 1], curveData[i], size, color);
        }
    }

    function point(x, y) {
        this.x = x;
        this.y = y;
    };

    function clear() {
        //ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
        ctx.fillStyle = "#FEC343";
        ctx.fillRect(-canvas.width / 2, -canvas.height / 2, canvas.width / 2, canvas.height);
    }

    function getDir(pointA, pointB) {
        return Math.atan2(pointB.x - pointA.x, pointB.y - pointA.y) + Math.PI / 2;
    }

    function getDist(pointA, pointB) {
        return Math.sqrt((pointA.x - pointB.x) * (pointA.x - pointB.x) + (pointA.y - pointB.y) * (pointA.y - pointB.y));
    }

    function rand(min, max) {
        return Math.random() * max + min;
    }


    var options = {
        "circleSize": {
            "title": "Circle size",
            "val": 150,
            "min": 0,
            "max": 200
        },
        "reverseDir": {
            "title": "Reverse directions",
            "val": 0,
            "min": 0,
            "max": 1
        },
        "circleInside": {
            "title": "Inside/Outside circles",
            "val": 1,
            "min": 0,
            "max": 1
        },
        "sizeExp": {
            "title": "Size expansion",
            "val": 20,
            "min": 5,
            "max": 40
        },
        "iterations": {
            "title": "Iterations",
            "val": [10,'3D'],
            "min": 2,
            "max": 10
        },
        "speed": {
            "title": "Incrementation speed",
            "val": 33,
            "min": 10,
            "max": 50
        },
        "speed": {
            "title": "Incrementation speed",
            "val": 33,
            "min": 5,
            "max": 50
        },
        "trailSize": {
            "title": "Trail size",
            "val": 10,
            "min": 10,
            "max": 80
        },
    };

    // Exported
    options = {
        "circleSize": {
            "title": "Circle size",
            "val": "50",
            "min": 0,
            "max": 200
        },
        "reverseDir": {
            "title": "Reverse directions",
            "val": "0",
            "min": 0,
            "max": 1
        },
        "circleInside": {
            "title": "Inside/Outside circles",
            "val": "0",
            "min": 0,
            "max": 1
        },
        "sizeExp": {
            "title": "Size expansion",
            "val": "14",
            "min": 5,
            "max": 40
        },
        "iterations": {
            "title": "Iterations",
            "val": "5",
            "min": 2,
            "max": 10
        },
        "speed": {
            "title": "Incrementation speed",
            "val": "14",
            "min": 5,
            "max": 50
        },
        "trailSize": {
            "title": "Trail size",
            "val": 15,
            "min": 10,
            "max": 80
        }
    };

    options = {
        "circleSize": {
            "title": "Circle size",
            "val": "40",
            "min": 0,
            "max": 200
        },
        "reverseDir": {
            "title": "Reverse directions",
            "val": "0",
            "min": 0,
            "max": 1
        },
        "circleInside": {
            "title": "Inside/Outside circles",
            "val": "0",
            "min": 0,
            "max": 1
        },
        "sizeExp": {
            "title": "Size expansion",
            "val": "15",
            "min": 5,
            "max": 40
        },
        "iterations": {
            "title": "Iterations",
            "val": "5",
            "min": 2,
            "max": 10
        },
        "speed": {
            "title": "Incrementation speed",
            "val": "22",
            "min": 5,
            "max": 50
        },
        "trailSize": {
            "title": "Trail size",
            "val": "14",
            "min": 10,
            "max": 80
        }
    };


    function createPanel(options) {
        $('.box').text("");
        for (var key in options) {
            if (options.hasOwnProperty(key)) {
                var text = '<div class="unit"><small>' + options[key].title + '</small>';
                text += '<input class="range" type="range" min="' + options[key].min + '" max="' + options[key].max + '" ';
                text += 'value="' + options[key].val + '" id="' + key + '" style="width: wuto;" /><span>' + options[key].val + '</span> </div>';

                $('.box').append(text);
            }
        }
    }
    createPanel(options);

    $('.range').change(function() {
        var newVal = $(this).val();
        var id = $(this).attr('id');
        options[id].val = newVal;
        $(this).parent().children('span').text(newVal);

        ctx.fillStyle = "#55134E";
        ctx.fillRect(0, -canvas.height / 2, canvas.width / 2, canvas.height);
    });

    document.getElementById('export').addEventListener('click', function() {
        prompt("Your settings", JSON.stringify(options));
    });

    document.getElementById('load').addEventListener('click', function() {
        var load = prompt("Enter settings JSON", "");
        eval("options = " + load);
    });
</script>